<template>
	<view class="talk-detail-view" v-if="info.id">
		<!-- 轮播 -->
		<view class="swiper-box" v-if="info.file_assets.length>0">
			<swiper class="index-swiper" :style="{height: swiperHeight + 'px'}" :autoplay="false" circular
				:interval="5000" :duration="100" @change="swiperChange">
				<swiper-item v-for="(item,index) in info.file_assets" :key="item.id">
					<image mode="aspectFill" :src="item.url" @click="$api.toPrewImgArr(info.file_assets,index)"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-radius">
				<block v-for="(item, index) in info.file_assets" :key="item.id">
					<view :class="{ dot_select: swiperSelect === index }"></view>
				</block>
			</view>
		</view>
		<view class="detail-content">
			<view class="user-info fx-center-between" v-if="info.user">
				<view class="fx-center">
					<image :src="info.user.avatar_url" mode="aspectFill" class="user-avtr" @click="toHome"></image>
					<view class="">
						<view class="user-name" @click="toHome">{{info.user.nickname}}</view>
						<!-- <view class="user-desc">收入指数上榜用户</view> -->
					</view>
				</view>

				<view class="fx-center">
					<template v-if="isUser==false">
						<van-button color="#F1F3F6" custom-style="color: #8A8F99;" size="small"
							@click="$refs.sheetRef.followUser()" v-if="info.user.followed">已关注</van-button>
						<van-button color="#4078E5" size="small" @click="$refs.sheetRef.followUser()"
							v-else>关注</van-button>
					</template>

					<image src="/static/dian.png" mode="heightFix" class="dian-icon" @click="clickAction"></image>
				</view>
			</view>
			<view class="talk-content">{{info.content}}</view>
			<view class="fx-center">
				<view class="talk-tag" v-for="item in info.words" :key="item.id" @click="toTopicDetail(item.id)">
					<text># {{item.name}}</text>
				</view>
			</view>

			<view class="project-box fx-center-between" v-for="p in info.projects" :key="p.id">
				<view class="fx-center">
					<image :src="p.cover_url" mode="aspectFill"></image>
					<view class="">{{p.name}}</view>
				</view>
				<van-button color="#F2F2F2" custom-style="color:#8A8F99" size="mini"
					@click="lookProject(p.id)">查看项目</van-button>
			</view>
			<view class="fx-center time-box">
				<image src="/static/clock.png" mode="widthFix"></image>
				<view class="">{{info.time_ago}} &nbsp;&nbsp; | &nbsp;&nbsp; {{info.view_count}}人浏览</view>
			</view>
			<view class="fx-center-between comment-box">
				<view class="comment-title">共 {{total}} 条评论</view>
				<view class="fx-center comment-tag">
					<view class="tag-item" :class="commentCheck === 1 ? 'tag-check' : ''" @click="checkComment(1)">推荐
					</view>
					<view class="tag-item" :class="commentCheck === 2 ? 'tag-check' : ''" @click="checkComment(2)">最新
					</view>
				</view>
			</view>
			<view class="" v-for="(item,index) in commentList" :key="item.id">
				<c-comment :info="item" @reply="commentReply"></c-comment>
			</view>
			<view class="no-more">没有更多了</view>
		</view>
		<!-- <view class="fx-center-between talk-input-box">
			<view class="fx-center input-box">
				<image src="/static/input_edit.png" mode="heightFix"></image>
				<view class="">说点什么吧...</view>
			</view>
			<view class="fx-center input-right">
				<image src="/static/zan1.png" mode="heightFix" v-if="info.liked"></image>
				<image src="/static/zan.png" mode="heightFix" v-else></image>
				<view :class="info.liked?'tip-color' : ''">{{info.like_count>0?info.like_count:'点赞'}}</view>
				<image src="/static/share.png" mode="heightFix"></image>
				<view class="">{{info.share_count>0?info.share_count:'分享'}}</view>
			</view>
		</view> -->
		<c-comment-input ref="commentRef" inputType="topicDetail" :topicID="info.id" :like_count="info.like_count"
			:share_count="info.share_count" :liked="info.liked" @done="getComment"
			@refrashLiked="likedRefrash"></c-comment-input>
		<c-user-opration ref="sheetRef" :info="info" :userId="info.user.id"></c-user-opration>
	</view>
</template>

<script>
	let screenWidth = uni.getWindowInfo().screenWidth
	export default {
		data() {
			return {
				swiperSelect: 0,
				swiperHeight: 0,
				info: {},
				showSheet: false,
				commentCheck: 1,
				commentList: [],
				//是否为用户自己的帖子
				isUser: false,
				page: 1,
				total: 0
			};
		},
		onLoad(e) {
			if (e.fuid) {
				this.fuid = e.fuid
			}
			if (e.id) {
				this.getDetail(e.id)
			}
		},
		onShareAppMessage(res) {
			return this.getShareMessage(res);
		},
		onShareTimeline(res) {
			return this.getShareMessage(res);
		},
		onReachBottom() {
			if (this.commentList.length < this.total) {
				this.page++
				this.getComment()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 500
					}
				})
			} else {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#F1F3F6',
					animation: {
						duration: 500
					}
				})
			}
		},
		methods: {
			// 项目详情
			getDetail(id) {
				this.$api.requst('/gwc/topics/' + id, {
					id: id,
					fuid: this.fuid || ''
				}).then((res) => {
					this.info = res.data
					this.isUser = (res.data.user.id == uni.getStorageSync("userId") ? true : false)
					this.getComment()
					if (this.info.file_assets.length > 0) {
						let rate = Number(this.info.file_assets[0].width) / Number(screenWidth)
						this.swiperHeight = Number(this.info.file_assets[0].height) / Number(rate)
					}
				})
			},
			// 获取评论
			getComment() {
				this.$api.requst('/gwc/comments/tree', {
					obj_id: this.info.id,
					obj_type: 'Topic',
					sort: this.commentCheck - 1,
					page: this.page,
				}).then((res) => {
					this.total = res.total
					if (this.page === 1) {
						this.commentList = res.data
					} else {
						res.data.forEach(item => {
							this.commentList.push(item)
						})
					}
				})
			},
			// 轮播切换
			swiperChange(e) {
				this.swiperSelect = e.detail.current
				let rate = Number(this.info.file_assets[this.swiperSelect].width) / Number(screenWidth)
				this.swiperHeight = Number(this.info.file_assets[this.swiperSelect].height) / Number(rate)
			},
			// 用户弹框
			clickAction() {
				this.$refs.sheetRef.show()
			},
			// 评论分类选择
			checkComment(index) {
				this.commentCheck = index
				this.page = 1
				this.getComment()
			},
			// 查看项目
			lookProject(id) {
				uni.navigateTo({
					url: '/pages/index/projectDetail/projectDetail?id=' + id
				})
			},
			// 评论回复
			commentReply(info) {
				this.$refs.commentRef.doReply(info)
			},
			// 获取分享数据
			getShareMessage(res) {
				if (!this.info) {
					return null;
				}
				let uid = uni.getStorageSync("userId") || ''
				const path = `/pages/index/talkDetail/talkDetail?id=${this.info.id}&fuid=${uid}`;

				const obj = {
					title: this.info.content,
					path: path
				};

				if (this.info.file_assets.length > 0) {
					obj['imageUrl'] = this.info.file_assets[0].url;
				}
				return obj;
			},
			// 话题详情
			toTopicDetail(id) {
				uni.navigateTo({
					url: '/pages/index/hotTopic/topicDetail/topicDetail?id=' + id
				})
			},
			// 个人主页
			toHome() {
				uni.navigateTo({
					url: '/pages/mine/myHome/myHome?id=' + this.info.user.id
				})
			},
			// 点赞提交
			likedRefrash() {
				this.info.liked = !this.info.liked
				if (this.info.liked) {
					this.info.like_count++
				} else {
					this.info.like_count--
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.talk-detail-view {
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: 100rpx;

		.swiper-box {
			position: relative;

			.index-swiper {
				width: 100%;
				height: 820rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-radius {
				margin-top: 50rpx;
				display: flex;
				justify-content: center;

				view {
					width: 48rpx;
					height: 4rpx;
					background: #D8D8D8;
					margin: 0 8rpx;
					float: left;
					-webkit-transition: 0.3s;
					transition: 0.3s;
				}

				.dot_select {
					background: #161616;
				}
			}
		}

		.detail-content {
			padding: 50rpx 32rpx 100rpx;

			.user-info {

				.user-avtr {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.user-name {
					font-size: 30rpx;
				}

				.user-desc {
					color: #8A8F99;
					font-size: 22rpx;
				}

				.dian-icon {
					width: 6rpx;
					height: 34rpx;
					padding-left: 30rpx;
				}
			}

			.talk-content {
				font-size: 32rpx;
				margin-top: 32rpx;
				white-space: pre-wrap;
			}

			.talk-tag {
				margin: 40rpx 40rpx 0 0;

				text {
					background: #F1F3F6;
					color: #5C5F66;
					font-size: 22rpx;
					font-weight: bold;
					padding: 6rpx 12rpx 8rpx 12rpx;
				}
			}

			.project-box {
				border: 1rpx solid #E2E2E2;
				padding: 16rpx 16rpx 16rpx 10rpx;
				font-size: 26rpx;
				color: #333333;
				margin-top: 40rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 24rpx;
					border-radius: 4rpx;
				}
			}

			.time-box {
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E2E2E2;
				font-size: 26rpx;
				color: #8A8F99;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}
			}

			.comment-box {
				margin-top: 40rpx;
				padding-bottom: 16rpx;

				.comment-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.comment-tag {
					border-radius: 40rpx;
					background: #F2F2F2;
					font-size: 26rpx;
					color: #999999;

					.tag-item {
						margin: 4rpx;
						padding: 8rpx 28rpx;
					}

					.tag-check {
						background: #FFFFFF;
						border-radius: 40rpx;
						font-weight: bold;
						color: #666666;
					}
				}
			}

			.no-more {
				margin-top: 32rpx;
				text-align: center;
				font-size: 26rpx;
				color: #8A8F99;
			}
		}

		// .talk-input-box {
		// 	position: fixed;
		// 	left: 0;
		// 	right: 0;
		// 	bottom: 0;
		// 	background-color: #fff;
		// 	border-top: 1rpx solid #E2E2E2;
		// 	padding: 22rpx 32rpx 50rpx;

		// 	.input-box {
		// 		flex: 1;
		// 		background: #F1F3F6;
		// 		border-radius: 4rpx;
		// 		padding: 14rpx 20rpx;
		// 		font-size: 30rpx;
		// 		color: #BEBFC2;

		// 		image {
		// 			width: 44rpx;
		// 			height: 44rpx;
		// 			margin-right: 8rpx;
		// 		}
		// 	}

		// 	.input-right {
		// 		font-size: 30rpx;
		// 		color: #5C5F66;

		// 		image {
		// 			width: 40rpx;
		// 			height: 40rpx;
		// 			margin-left: 32rpx;
		// 			margin-right: 8rpx;
		// 		}

		// 		.tip-color {
		// 			color: #325EB2;
		// 		}
		// 	}
		// }
	}
</style>